#dialogue{

  .screen{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    top: 0;
    left: 0;
    z-index: 50;
    pointer-events: all;
  }

  .wrapper{
    position: fixed; 
    bottom: 0;
    z-index: 100;
    width: 100%;
    
    .message{
      display: grid;
      grid-template-rows: auto 1fr;
      @include Text;
      @include S(height, 200px);
      background: white;
      box-shadow: 0 3px 8px 0 rgba(0, 22, 44, .1);

      @include InlineAnimation(.5s){
        0%{transform: translateY(50px); opacity: 0;}
        100%{transform: translateY(0px); opacity: 1;}
      }

      h3{
        @include Heading;
        @include S(padding-top, 15px);
        @include S(padding-left, 20px);
      }
      .content{
        @include S(padding, 20px);
        padding-top: 0;
        pointer-events: all;
        overflow-y: auto;
        @include S(margin-top, 10px);

        @include InlineAnimation(.5s){
          0%{transform: translateX(-50px); opacity: 0;}
          100%{transform: translateX(0px); opacity: 1;}
        }

        &.remove-anim{
          @include InlineAnimation(.5s){
            0%{transform: translateX(0px); opacity: 1;}
            100%{transform: translateX(-50px); opacity: 0;}
          }
        }
      }
    }

    .btns-pos{
      position: absolute;
      right: 10px;
      top: -15px;
      transform: translateY(-100%);
      width: 60%;
      display: flex;
      justify-content: end;

      img{
        @include S(width, 20px);
        @include S(margin-right, 5px);
      }

      .btn{
        display: flex;
        align-items: center;
        @include S(margin-top, 15px);
        @include PlainText;
        width: fit-content;
        background: rgba(48, 48, 48, 0.9);
        border-radius: 4px;
        color: white;
        @include S(padding, 10px, 15px);
        cursor: pointer;
        pointer-events: all;
        margin-left: auto;
        opacity: 0;

        @include InlineAnimation(.5s){
          0%{transform: translateX(100px); opacity: 0;}
          100%{transform: translateX(0px); opacity: 1;}
        }
        animation-fill-mode: forwards;

        @for $i from 1 to 10 {
          &:nth-child(#{$i}){
            animation-delay: #{$i * .2}s;
          }
        }
      }
    }
  }

  &.remove-anim{

    .screen{
      @include InlineAnimation(.5s){
        0%{opacity: 1;}
        100%{opacity: 0;}
      }
    }

    .message{
      @include InlineAnimation(.5s){
        0%{transform: translateY(0px); opacity: 1;}
        100%{transform: translateY(50px); opacity: 0;}
      }
    }

    .btn-list{
      @include InlineAnimation(.5s){
        0%{transform: translateX(0px); opacity: 1;}
        100%{transform: translateX(100px); opacity: 0;}
      }
    }
  }
}